<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="box">
        <!-- 头部开始 -->
        <div class="head">
            <div class="center">
                <div class="head_img fl"><img src="./images/logo.jpg" alt=""></div>
                <div class="head_left fl">
                    legochina.cn
                </div>
                <div class="head_right fr">
                    欢迎光临<span>乐购</span>，请 登陆\<span>注册</span>
                </div>
            </div>
        </div>
        <!-- 头部结束 -->
        <!-- 导航栏开始 -->
        <div class="center clearfix">
            <div class="nav">
                <div class="nav_top clearfix">
                    <div class="nav_top_centent">
                        <input type="text" name="" id="" class="fl">
                        <button class="fl"></button>
                    </div>
                    <div class="nav_top_right fr">
                        <button class="fl">
                            <div class="fl"></div><span class="fl">购物车</span><span class="fr">3</span>
                        </button>
                        <button class="fl">我的订单</button>
                    </div>
                </div>
                <div class="nav_bottom">
                    <ul>
                        <li><a href="#">图书</a></li>
                        <li><a href="#">电子书</a></li>
                        <li><a href="#">原创文学</a></li>
                        <li><a href="#">服装</a></li>
                        <li><a href="#">运动户外</a></li>
                        <li><a href="#">孕婴童</a></li>
                        <li><a href="#">家居</a></li>
                        <li><a href="#">创意文具</a></li>
                        <li><a href="#">地方特产</a></li>
                        <li><a href="#">海外购</a></li>
                        <li><a href="#">电器城</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 导航栏结束 -->
        <!-- 选项栏开始 -->
        <div class="center">
            <div class="optional fl ">
                <ul>
                    <li>图书、电子书、童书</li>
                    <li>创意文具</li>
                    <li>服饰、内衣</li>
                    <li>鞋靴、箱包</li>
                    <li>运动户外</li>
                    <li>孕、婴、童</li>
                    <li>家居、家纺、汽车</li>
                    <li>家具、家装、康本</li>
                    <li>美妆、个人护理、成人</li>
                    <li>食品、茶酒、生鲜</li>
                    <li>腕表、珠宝、眼镜</li>
                    <li>手机、数码</li>
                    <li>电脑办公</li>
                    <li>家用电器</li>
                </ul>
            </div>
        </div>
        <!-- 选项栏结束 -->
        <!-- 轮播图开始 -->
        <div class="center clearfix">
            <div class="banner fl">
                <div class="pptbox" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li>
                            <a href="#"><img src="images/banner1.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner2.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner3.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner4.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner5.jpg" /></a>
                        </li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
            </div>
        </div>
        <!-- 轮播图结束 -->
        <!-- 今日推荐开始 -->
        <div class="center clearfix">
            <div class="daily">
                <h1>乐购·今日推荐</h1>
                <div></div>
                <ul>
                    <li>
                        <div class="img_top"><img src="images/product01.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                        <p class="red">全国联保 一年免费包换</p>
                        <h3>￥：299</h3>
                    </li>
                    <li>
                        <div class="img_top"><img src="images/product01.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                        <p class="red">全国联保 一年免费包换</p>
                        <h3>￥：299</h3>
                    </li>
                    <li>
                        <div class="img_top"><img src="images/product01.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                        <p class="red">全国联保 一年免费包换</p>
                        <h3>￥：299</h3>
                    </li>
                    <li>
                        <div class="img_top"><img src="images/product01.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                        <p class="red">全国联保 一年免费包换</p>
                        <h3>￥：299</h3>
                    </li>
                    <li>
                        <div class="img_top"><img src="images/product01.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                        <p class="red">全国联保 一年免费包换</p>
                        <h3>￥：299</h3>
                    </li>
                    <li>
                        <div class="img_top"><img src="images/product01.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                        <p class="red">全国联保 一年免费包换</p>
                        <h3>￥：299</h3>
                    </li>
                    <li>
                        <div class="img_top"><img src="images/index06_11.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>小熊家用静音加混器</p>
                        <p class="red">唯美外观 微米级喷雾</p>
                        <h3>￥：89</h3>
                    </li>
                    <li>
                        <div class="img_top"><img src="images/index06_11.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>小熊家用静音加混器</p>
                        <p class="red">唯美外观 微米级喷雾</p>
                        <h3>￥：89</h3>
                    </li>
                    <li>
                        <div class="img_top"><img src="images/index06_11.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>小熊家用静音加混器</p>
                        <p class="red">唯美外观 微米级喷雾</p>
                        <h3>￥：89</h3>
                    </li>
                    <li>
                        <div class="img_top"><img src="images/index06_11.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>小熊家用静音加混器</p>
                        <p class="red">唯美外观 微米级喷雾</p>
                        <h3>￥：89</h3>
                    </li>
                    <li>
                        <div class="img_top"><img src="images/index06_11.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>小熊家用静音加混器</p>
                        <p class="red">唯美外观 微米级喷雾</p>
                        <h3>￥：89</h3>
                    </li>
                    <li>
                        <div class="img_top"><img src="images/index06_11.jpg" alt=""></div>
                        <div class="img_bottom"><img src="images/limitTime.jpg" alt=""></div>
                        <p>小熊家用静音加混器</p>
                        <p class="red">唯美外观 微米级喷雾</p>
                        <h3>￥：89</h3>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 今日推荐结束 -->
        <!-- 售后服务开始 -->
        <div class="sale">
            <div class="xg"></div>
            <div class="center">
                <div class="sale_center">
                    <img src="images/222_11.png" alt="">
                    <img src="images/222_13.png" alt="">
                    <img src="images/222_15.png" alt="">
                    <img src="images/222_17.png" alt="">
                </div>
            </div>
        </div>
        <!-- 售后服务结束 -->
        <!-- 尾部导航开始 -->
        <div class="center">
            <div class="bottnav">
                <ul class="bottnav_center">
                    <li>
                        <p>购物指南</p>
                        <ul>
                            <li>购物流程</li>
                            <li>发票制度</li>
                            <li>账户管理</li>
                            <li>会员优惠</li>
                        </ul>
                    </li>
                    <li>
                        <p>支付方式</p>
                        <ul>
                            <li>货到付款</li>
                            <li>网上支付</li>
                            <li>礼品卡支付</li>
                            <li>银行转账</li>
                        </ul>
                    </li>
                    <li>
                        <p>订单服务</p>
                        <ul>
                            <li>订单配送查询</li>
                            <li>订单状态说明</li>
                            <li>自助取消订单</li>
                            <li>自助修改订单</li>
                        </ul>
                    </li>
                    <li>
                        <p>退换货</p>
                        <ul>
                            <li>退换货政策</li>
                            <li>自助申请退换货</li>
                            <li>退换货进度查询</li>
                            <li>退款方式和时间</li>
                        </ul>
                    </li>
                    <li>
                        <p>商家服务</p>
                        <ul>
                            <li>商家中心</li>
                            <li>运营服务</li>
                            <li>加入尾品汇</li>
                        </ul>
                    </li>
                </ul>
                <div class="bottnav_img">
                    <img src="images/logo_00.png" alt="">
                </div>
            </div>
        </div>
        <!-- 尾部导航结束 -->
        <div class="center">

        </div>
    </div>

    <script src="javascripts/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <!--插件库-->
    <script src="javascripts/slider.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //主轮播图
        $("#bannerInner").tyslide({
            boxh: 420, //盒子的高度
            w: 1000, //盒子的宽度
            h: 390, //图片的高度
            isShow: true, //是否显示控制器
            isShowBtn: true, //是否显示左右按钮
            controltop: 40, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
            controlsW: 20, //控制按钮宽度
            controlsH: 20, //控制按钮高度
            radius: 5, //控制按钮圆角度数
            controlsColor: "#d7d7d7", //普通控制按钮的颜色
            controlsCurrentColor: "#ff6600", //当前控制按钮的颜色
            isShowNum: true //是否显示数字
        });
    </script>
</body>

</html>